<link rel="stylesheet" href="index.scss">
<div id="outputAppointment">
    <!--页面调整-->
    <el-row v-loading="showLoading"
            element-loading-text="拼命加载中">
        <el-col :span="24">
            <el-carousel
                    ref="carouselWaiting"
                    :autoplay="false"
                    arrow="never"
                    indicator-position="none"
                    height="65vh">
                <el-carousel-item>
                    <el-row>
                        <el-col :span="24">
                            <div class="inner btn-nav">
                                <el-input
                                        @change="selectReturn"
                                        v-model="ckCkdjNo"
                                        icon="search"
                                        placeholder="出库单号"></el-input>
                                <el-input
                                        @change="selectReturn"
                                        v-model="ckCkdjClientname"
                                        icon="search"
                                        placeholder="客户名称"></el-input>
                                <el-input
                                        @change="selectReturn"
                                        v-model="ckAdress"
                                        icon="search"
                                        placeholder="地址"></el-input>

                                <!--<el-date-picker-->
                                        <!--v-model="date"-->
                                        <!--type="daterange"-->
                                        <!--align="right"-->
                                        <!--placeholder="下单时间"-->
                                        <!--class="datePicker"-->
                                        <!--:picker-options="pickerOptions">-->
                                <!--</el-date-picker>-->
                                <!--<el-select v-model.number="ckCkdjType" placeholder="请选择">-->
                                    <!--<el-option :value.number="-1" label="全部"></el-option>-->
                                    <!--<el-option :value.number="0" label="正常单据"></el-option>-->
                                    <!--<el-option :value.number="1" label="挂起单据"></el-option>-->
                                    <!--<el-option :value.number="2" label="滞留单据"></el-option>-->
                                <!--</el-select>-->
                                <el-select
                                        @visible-change="selectReturn"
                                        v-model="ckArehouseId"
                                        placeholder="请选择所属仓库">
                                    <el-option :label="obj.baName" :value="obj.baArehouseId"
                                               v-for="obj of baseArehouses"></el-option>
                                </el-select>
                                <button @click="dialogSelectVisible=!dialogSelectVisible" class="btn btn-search"><i
                                        class="icon search"></i><span>详细查询</span>
                                </button>
                                <button @click="newInput" class="btn btn-add"><i class="icon add"></i><span>添加</span>
                                </button>
                                <button @click="multiSelectClick" class="btn btn-multiSelect"><i
                                        class="icon sel"></i><span>多选</span>
                                </button>
                                <button @click="moreOperationDelete" class="btn btn-del" v-show="multiSelect"><i
                                        class="icon del"></i><span>批量删除</span>
                                </button>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <h4>等待选择</h4>
                            <el-table
                                    :data="outputAppointment"
                                    :default-sort="{prop: 'sjsj', order: 'descending'}"
                                    :max-height="config_table_height(1)"
                                    @toggleRowSelection="rowSelection"
                                    @expand="expandChange"
                                    @select="handleSelectionChange"
                                    @select-all="handleSelectionChangeAll"
                                    ref="table"
                                    class="outputAppointmentTable"
                                    style="width: 100%">
                                <el-table-column
                                        type="expand">
                                    <template scope="props">
                                        <el-row>
                                            <el-col :span="24">
                                                <el-form label-position="left" inline class="demo-table-expand">
                                                    <el-form-item label="下单时间">
                                                        <el-icon name="time"></el-icon>
                                                        <span style="margin-left: 10px">{{ auto_time_new(props.row.ckXdsj,6) }}</span>
                                                    </el-form-item>
                                                    <el-form-item label="出库单号">
                                                        <el-tag type="success">{{props.row.ckCkdjNo}}</el-tag>
                                                    </el-form-item>
                                                    <el-form-item label="单据类型">
                                                        <el-tag-s :val="auto_el_tag('ckCkdjType',props.row.ckCkdjType)"></el-tag-s>
                                                    </el-form-item>
                                                    <el-form-item label="客户编号">
                                                        <span>{{ props.row.ckCkdjClientno }}</span>
                                                    </el-form-item>
                                                    <el-form-item label="客户名称">
                                                        <span>{{ props.row.ckCkdjClientname }}</span>
                                                    </el-form-item>
                                                    <el-form-item label="联系人">
                                                        <span>{{ props.row.ckContacts }}</span>
                                                    </el-form-item>
                                                    <el-form-item label="联系电话">
                                                        <span>{{ props.row.ckTel }}</span>
                                                    </el-form-item>
                                                    <el-form-item label="地址">
                                                        <span>{{ props.row.ckAdress }}</span>
                                                    </el-form-item>
                                                    <el-form-item label="总数量">
                                                        <span>{{ props.row.allCount }}</span>
                                                    </el-form-item>
                                                    <el-form-item label="总体积">
                                                        <span>{{ props.row.allTj    }}</span>
                                                    </el-form-item>
                                                    <el-form-item label="制单方式">
                                                        <el-tag-s :val="auto_el_tag('rkZdfs',props.row.ckIsauto)"></el-tag-s>
                                                    </el-form-item>

                                                    <el-form-item label="单据状态">
                                                        <el-tag-s :val="auto_el_tag('ckStatus',props.row.ckStatus)"></el-tag-s>
                                                    </el-form-item>
                                                    <el-form-item label="备注">
                                                        <span>{{ props.row.ckRemarks    }}</span>
                                                    </el-form-item>


                                                    <el-form-item label="可用操作">
                                                        <el-row>
                                                            <el-button
                                                                    size="small"
                                                                    icon="view"
                                                                    @click="View(props.$index, props.row)">
                                                            </el-button>
                                                            <el-button
                                                                    size="small"
                                                                    icon="edit"
                                                                    v-if="props.row.ckIsauto==1"
                                                                    @click="inlineEdit(props.$index, props.row)">
                                                            </el-button>
                                                            <el-button
                                                                    size="small"
                                                                    v-if="props.row.ckIsauto==1"
                                                                    icon="delete"
                                                                    type="danger"
                                                                    @click="inlineDeleteOlder(props.$index, props.row)">
                                                            </el-button>
                                                        </el-row>
                                                        <el-button
                                                                size="small"
                                                                type="info"
                                                                v-if="props.row.ckCkdjType==2"
                                                                @click="inlineRetentionInput(props.$index, props.row)">
                                                            滞留入库
                                                        </el-button>
                                                    </el-form-item>
                                                </el-form>
                                            </el-col>
                                        </el-row>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="所属仓库"
                                        align="center"
                                        prop="ckArehouseId">
                                    <template scope="scope">
                                        <el-tag
                                                type="success"
                                                close-transition>
                                            {{auto_ckArehouseId(scope.row.ckArehouseId)}}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="出库单号"
                                        show-overflow-tooltip
                                        align="center"
                                        prop="ckCkdjNo">
                                </el-table-column>

                                <el-table-column
                                        width="80"
                                        align="center"
                                        label="时间">
                                    <template scope="scope">
                                        {{auto_ckXdsj(scope.row.ckXdsj,true)}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        type="selection"
                                        width="60">
                                </el-table-column>
                            </el-table>
                        </el-col>
                        <el-col :span="12">
                            <h4>等待组合</h4>
                            <el-table
                                    :data="outputAppointmentCombination"
                                    :default-sort="{prop: 'sjsj', order: 'descending'}"
                                    :max-height="config_table_height(1)"
                                    @toggleRowSelection="rowSelection"
                                    @expand="expandChange"
                                    @selection-change="handleSelectionChangeCombination"
                                    ref="table"
                                    class="outputAppointmentTable"
                                    style="width: 100%">
                                <el-table-column
                                        type="index"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        label="出库单号"
                                        show-overflow-tooltip
                                        align="center"
                                        prop="ckCkdjNo">
                                </el-table-column>
                                <el-table-column
                                        label="单据类型"
                                        align="center">
                                    <template scope="scope">
                                        <el-tag-s :val="auto_el_tag('ckCkdjType',scope.row.ckCkdjType)"></el-tag-s>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        width="80"
                                        align="center"
                                        label="时间">
                                    <template scope="scope">
                                        {{auto_ckXdsj(scope.row.ckXdsj,true)}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        v-if="multiSelect"
                                        type="selection"
                                        width="60">
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-carousel-item>
                <el-carousel-item>
                    <el-row>
                        <el-col :span="24"><h4>预约详细</h4></el-col>
                    </el-row>
                    <el-row class="outputAppointmentCombinationDetails">
                        <el-form
                                :model="outputAppointmentCombinationDetails"
                                ref="ref_outputAppointmentCombinationDetails"
                                :label-width="formLabelWidth"
                                :rules="rule_outputAppointmentCombinationDetails">
                            <el-col :span="10">
                                <el-form-item
                                        prop="ckrwNo"
                                        label="出库任务单号"
                                        :label-width="formLabelWidth">
                                    <el-input
                                            v-model="outputAppointmentCombinationDetails.ckrwNo"
                                            :disabled="true"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item
                                        prop="ckrwYjdcsj"
                                        label="预计到车时间">
                                    <el-date-picker
                                            v-model="outputAppointmentCombinationDetails.ckrwYjdcsj"
                                            type="datetime"
                                            placeholder="选择到车时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="2">
                                <el-form-item
                                        prop="ckrwCph"
                                        label="车牌号"
                                        :label-width="formLabelWidth">
                                    <el-input
                                            v-model="outputAppointmentCombinationDetails.ckrwCph"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item
                                        label="物流商"
                                        prop="ckrwWls"
                                        :label-width="formLabelWidth">
                                    <el-input
                                            v-model="outputAppointmentCombinationDetails.ckrwWls"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
            <el-row class="formBottom">
                <el-col :span="18" :offset="1">
                    <el-steps
                            :space="200"
                            :active="formActive"
                            finish-status="success">
                        <el-step title="选择订单"></el-step>
                        <el-step title="预约详细"></el-step>
                    </el-steps>
                </el-col>
                <el-col :span="5">
                    <el-button class='formBottom' type="primary" @click="prevForm" v-show="formActive">上一步</el-button>
                    <el-button class='formBottom' type="primary" @click="nextForm" v-show="formActive<1"
                               :disabled="outputAppointmentCombination.length==0">下一步
                    </el-button>
                    <el-button class='formBottom' type="primary" @click="submitForm" :loading="submitLoading"
                               v-show="formActive>=1">保存并下发
                    </el-button>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-dialog
            size="tiny"
            class="select"
            v-model="dialogSelectVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">详细查询</span>
        </div>
        <el-form :model="form">
            <el-form-item label="出库单号"
                          :label-width="formLabelWidth">
                <el-input
                        class="input"
                        v-model="form.ckCkdjNo"
                        icon="search"
                        placeholder="出库单号"></el-input>
            </el-form-item>
            <el-form-item label="客户名称"
                          :label-width="formLabelWidth">
                <el-input
                        class="input"
                        v-model="form.ckCkdjClientname"
                        icon="search"
                        placeholder="客户名称"></el-input>
            </el-form-item>
            <el-form-item label="下单时间"
                          :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.ckXdsj"
                        type="daterange"
                        align="right"
                        placeholder="下单时间"
                        class="input"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="所属仓库" :label-width="formLabelWidth">
                <el-select
                        @visible-change="selectReturn"
                        v-model="form.ckArehouseId"
                        placeholder="请选择所属仓库">
                    <el-option :label="obj.baName" :value="obj.baArehouseId"
                               v-for="obj of baseArehouses"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="单据类型" :label-width="formLabelWidth">
                <el-select v-model.number="form.ckCkdjType" placeholder="请选择">
                <el-option :value.number="-1" label="全部"></el-option>
                <el-option :value.number="0" label="正常单据"></el-option>
                <el-option :value.number="1" label="挂起单据"></el-option>
                <el-option :value.number="2" label="滞留单据"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="form = _form()">重置</el-button>
            <el-button type="primary" @click="selectSubmit" :loading="selectLoading">查询</el-button>
        </div>
    </el-dialog>
    <el-dialog
            size="small"
            v-model="dialogFormVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">{{form.title}}</span>
            <el-steps
                    class="steps"
                    :space="120"
                    :active="dialogFormActive"
                    finish-status="success">
                <el-step title="基础信息"></el-step>
                <el-step title="出库明细"></el-step>
            </el-steps>
        </div>
        <el-form :model="form" ref="newForm">
            <el-carousel
                    ref="carousel"
                    :autoplay="false"
                    arrow="never"
                    indicator-position="none"
                    height="55vh">
                <el-carousel-item>
                    <el-form
                            :model="form"
                            ref="ref_form"
                            :rules="rule_form">
                        <el-row>
                            <el-col :span="24"><h3>出库基础信息</h3></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="所属仓库" :label-width="formLabelWidth">
                                    <el-select v-model.number="form.ckArehouseId"
                                               :disabled="watchView"
                                               placeholder="请选择所属仓库">
                                        <el-option :label="obj.baName" :value="obj.baArehouseId"
                                                   v-for="obj of baseArehouses"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                        label="客户名称"
                                        prop="ckCkdjClientname"
                                        :label-width="formLabelWidth">
                                    <el-input
                                            :disabled="watchView"
                                            v-model="form.ckCkdjClientname"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item
                                        label="联系电话"
                                        prop="ckTel"
                                        :label-width="formLabelWidth">
                                    <el-input
                                            v-model="form.ckTel"
                                            :disabled="watchView"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item
                                        label="客户地址"
                                        prop="ckAdress"
                                        :label-width="formLabelWidth">
                                    <el-input
                                            v-model="form.ckAdress"
                                            :disabled="watchView"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item
                                        label="联系人"
                                        prop="ckContacts"
                                        :label-width="formLabelWidth">
                                    <el-input
                                            v-model="form.ckContacts"
                                            :disabled="watchView"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="2">
                                <el-form-item label="出库单号">
                                    <el-tag type="success">{{form.ckCkdjNo}}</el-tag>
                                </el-form-item>
                                <el-form-item label="出库数量">
                                    {{form.allCount}}
                                </el-form-item>
                                <el-form-item label="出库体积">
                                    {{form.allTj}}
                                </el-form-item>
                                <el-form-item label="出库重量">
                                    {{form.allHeight}}
                                </el-form-item>
                                <el-form-item>
                                    <el-input
                                            type="textarea"
                                            :rows="2"
                                            v-model="form.ckRemarks"
                                            :disabled="watchView"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-carousel-item>
                <el-carousel-item>
                    <el-form
                            :model="form.selectGood"
                            :rules="rule_form2"
                            ref="ref_form2">
                        <el-row>
                            <el-col :span="24"><h3>出库明细</h3></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="货品编号" :label-width="formLabelWidth">
                                    <strong>{{form.selectGood.baseGoods.bgGoodsNo}}</strong>
                                </el-form-item>
                            </el-col>
                            <el-col :span="14">
                                <el-form-item label="货品名称" :label-width="formLabelWidth">
                                    <el-tooltip class="item" effect="dark"
                                                :content="form.selectGood.baseGoods.bgGoodsName"
                                                placement="top">
                                        <strong class="bgGoodsName">{{form.selectGood.baseGoods.bgGoodsName}}</strong>
                                    </el-tooltip>
                                </el-form-item>
                            </el-col>
                            <!--<el-col :span="8">-->
                                <!--<el-form-item label="货品数量" :label-width="formLabelWidth">-->
                                    <!--<strong>{{form.selectGood.cksGoodsCount}}</strong>-->
                                <!--</el-form-item>-->
                            <!--</el-col>-->
                        </el-row>
                        <el-row v-show="!watchView">
                            <el-col :span="14">
                                <el-form-item label="货品编号" :label-width="formLabelWidth">
                                    <el-autocomplete
                                            :fetch-suggestions="querySearchAsync"
                                            ref="ref_bgGoodsNo"
                                            v-model="form.selectGood.baseGoods.bgGoodsNo"
                                            @select="GoodSelect"
                                            :disabled="!form.deleteAmfunckDocs"
                                            auto-complete="off"></el-autocomplete>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                        label="货品数量"
                                        prop="cksGoodsCount"
                                        :label-width="formLabelWidth">
                                    <el-input
                                            :disabled="form.selectGood.cksGoodsId==0"
                                            ref="ref_rksCount"
                                            @keyup.enter.native="GoodEnter"
                                            v-model.number="form.selectGood.cksGoodsCount"
                                            auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" :offset="16" v-show="!watchView">
                                <el-button size="small" @click="saveDocsList"
                                           :disabled="form.saveAmfunckDocs||form.selectGood.cksGoodsCount==0">保存明细
                                </el-button>
                                <el-button size="small" @click="deleteAmfunckDocs" :disabled="form.deleteAmfunckDocs"
                                           type="danger">删除明细
                                </el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24" style="margin-top: 5px">
                                <el-table
                                        @row-click="GoodClick"
                                        height="200"
                                        :data="form.mfunckDocs">
                                    <el-table-column
                                            type="index"
                                            width="55">
                                    </el-table-column>
                                    <el-table-column
                                            label="货品编号"
                                            width="140"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="baseGoods.bgGoodsNo">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="baseGoods.bgGoodsName"
                                            show-overflow-tooltip
                                            label="货品名称">
                                    </el-table-column>
                                    <el-table-column
                                            label="件数"
                                            show-overflow-tooltip
                                            v-if="form.title!='新建出库单'"
                                            width="80"
                                            prop="docsHslCount"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            label="台数"
                                            width="100"
                                            prop="cksGoodsCount"
                                            align="center">
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-carousel-item>
            </el-carousel>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="prev" v-show="dialogFormActive">上一步</el-button>
            <el-button type="primary" @click="next" v-show="dialogFormActive < 1">下一步</el-button>
            <el-button type="primary" @click="submit" :loading="submitLoading" v-show="dialogFormActive >= 1"
                       :disabled="form.mfunckDocs.length==0" v-if="!watchView">保存
            </el-button>
            <el-button type="primary" @click="submitWatchView" :loading="submitLoading" v-show="dialogFormActive >= 1"
                       :disabled="form.mfunckDocs.length==0" v-if="watchView">确认
            </el-button>
        </div>
    </el-dialog>
</div>
<script src="index.js"></script>
